<template>
    <div class="select-checkbox">
        <div class="label">{{label}}</div>
        <div class="select-items">

            <div class="all">
                <p :class="!!selected && selected.length > 0 ? '' : 'active'" @click="handlerAllClick">全部</p>
            </div>
            <div class="checkbox-group">
                <el-checkbox-group v-model="checkList" @change="checkChange">
                    <el-checkbox 
                    v-for="item in arrData" 
                    :key="item[keyName]"
                    :label="item[keyName]"
                    >
                        {{item[contentName]}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script>
import MODEL from '@/mixins/model';
export default {
    mixins: [MODEL],
    props: {
        value: {
            type: Array,
            default: () => [],
        },
        keyName: {
            type: String,
            default: '',
        },
        label: {
            type: String,
            default: '',
        },
        contentName: {
            type: String,
            default: '',
        },
        options: {
            type: [Object, Array],
            default: () => {},
        },
    },
    data() {
        return {
            arrData: [],
            checkList: [],
        };
    },
    watch: {
        selected: {
            deep: true,
            handler(newValue, oldValue) {
                this.model = newValue;
            },
        },
        options: {
            deep: true,
            immediate: true,
            handler(newValue, oldValue) {
                this.int();
            },
        },
    },
    computed: {
        selected() {
            return this.checkList;
        },
    },
    methods: {
        int() {
            this.arrData = this.options;
        },
        handlerAllClick() {
            this.checkList = [];

            this.$emit('click', null, 0);
        },
        checkChange(val) {
            if (!val.length) {
                return;
            }

            let targetIndex = this.arrData.findIndex((item) => {
                return item[this.contentName] == val[val.length - 1];
            });

            this.$emit('click', val, targetIndex + 1);
        },
    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.select-checkbox {
    display: flex;
    // justify-content: space-between;

    .label {
        margin-top: 7px;
        padding-top: 6px;
        width: 70px;
        font-weight: 800;
        line-height: 1em;
    }

    .select-items {
        flex: 1;
        display: flex;
        // align-items: center;

        .all{
            line-height: 1em;
        }

        .all p {
            margin-right: 10px;
            margin-top: 7px;
            padding: 6px;
        }
        .all p:hover {
            background-color: $primaryColor;
            color: white;
        }
        
        .checkbox-group {
            padding-top: 7px;
            flex: 1;
            display: flex;
            align-items: top;

            ::v-deep{
                .el-checkbox {
                    padding: 3px 0;
                }
            }
        }

        .active {
            background-color: $primaryColor;
            color: white;
        }

        .el-checkbox {
            color: #303133;
        }
    }
}
</style>